<template>
    <div>
        <div class="contant">
            <el-tabs
                v-model="activeName"
                class="demo-tabs"
                @tab-click="handleClick"
            >
                <el-tab-pane
                    label="运输车"
                    name="first"
                >
                    <div class="operatingArea">
                        <div class="filter">
                            <div class="filter-item">
                                <el-input
                                    v-model="searchForm.transportDepName"
                                    placeholder="运输单位"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-input
                                    v-model="searchForm.licensePlate"
                                    placeholder="车牌号"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-button
                                    type="primary"
                                    @click="search"
                                >查询</el-button>
                                <el-button
                                    type="primary"
                                    @click="reset"
                                >重置</el-button>
                            </div>
                        </div>
                        <div class="addBtn">
                            <el-button
                                type="primary"
                                :icon="Plus"
                                :disabled="isSupervisor"
                                @click="handleAdd"
                            >新增</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        highlight-current-row
                        :cell-style="{ 'text-align': 'center' }"
                        :header-cell-style="headerCellStyle"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column
                            prop="transportDepName"
                            label="运输单位"
                        />
                        <el-table-column
                            prop="licensePlate"
                            label="车牌号"
                        />
                        <el-table-column
                            prop="vehicleType"
                            sortable
                            label="车辆类型"
                        />
                        <el-table-column
                            prop="transportCount"
                            label="累计运输次数"
                        />
                        <el-table-column
                            prop="lastTransportTime"
                            label="最新运输时间"
                        />
                        <el-table-column
                            prop="lastDriver"
                            label="最新驾驶员"
                        />

                        <!-- <el-table-column
                            prop="blackList"
                            label="黑名单"
                            column-key="blackList"
                            width="120"
                            :filters="[
                            { text: '是', value: '-1' },
                            { text: '否', value: '0' },
                        ]"
                            :filter-method="filterHandler"
                        /> -->
                        <el-table-column
                            label="操作"
                            width="140"
                            fixed="right"
                        >
                            <template #default="scope">
                                <el-button
                                    type="primary"
                                    :icon="View"
                                    size="small"
                                    @click="handleDetail(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="primary"
                                    :icon="Edit"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="danger"
                                    :icon="Delete"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="searchForm.pageNo"
                        v-model:page-size="searchForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 50, 100, 200]"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        class="equipmentPagination"
                    />
                </el-tab-pane>
                <el-tab-pane
                    label="驾驶员"
                    name="second"
                >
                    <div class="operatingArea">
                        <div class="filter">
                            <div class="filter-item">
                                <el-input
                                    v-model="searchFormPilot.username"
                                    placeholder="驾驶人姓名"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-button
                                    type="primary"
                                    @click="searchPilot"
                                >查询</el-button>
                                <el-button
                                    type="primary"
                                    @click="resetPilot"
                                >重置</el-button>
                            </div>
                        </div>
                        <div class="addBtn">
                            <el-button
                                type="primary"
                                :icon="Plus"
                                :disabled="isSupervisor"
                                @click="handleAddPilot"
                            >新增</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableDataPilot"
                        style="width: 100%"
                        highlight-current-row
                        :cell-style="{ 'text-align': 'center' }"
                        :header-cell-style="headerCellStyle"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column
                            prop="transportDepName"
                            label="运输单位"
                        />
                        <el-table-column
                            prop="username"
                            label="姓名"
                        />
                        <el-table-column
                            prop="phone"
                            sortable
                            label="联系方式"
                        />
                        <el-table-column
                            prop="transportCount"
                            label="累计运输次数"
                        />
                        <el-table-column
                            prop="lastTransportTime"
                            label="最新运输时间"
                        />
                        <el-table-column
                            label="操作"
                            width="140"
                            fixed="right"
                        >
                            <template #default="scope">
                                <el-button
                                    type="primary"
                                    :icon="View"
                                    size="small"
                                    @click="handleDetailPilot(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="primary"
                                    :icon="Edit"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleEditPilot(scope.$index, scope.row)"
                                >
                                </el-button>
                                <el-button
                                    type="danger"
                                    :icon="Delete"
                                    size="small"
                                    :disabled="isSupervisor"
                                    style="margin-left: 4px;"
                                    @click="handleDeletePilot(scope.$index, scope.row)"
                                >
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="searchFormPilot.pageNo"
                        v-model:page-size="searchFormPilot.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 50, 100, 200]"
                        :total="totalPilot"
                        @size-change="handleSizeChangePilot"
                        @current-change="handleCurrentChangePilot"
                        class="equipmentPagination"
                    />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="1000px"
    >
        <div class="dialogContent">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
                :inline="true"
                :disabled="dialogType == 'detail'"
            >
                <div class="baseInfo sludgemodel">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="运输单位"
                                prop="transportDep"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleForm.transportDep"
                                    placeholder="请选择"
                                    @change="transportDepChangeRuleForm"
                                >
                                    <el-option
                                        v-for="item in transportDepNameList"
                                        :key="item.id"
                                        :label="item.transportDepName"
                                        :value="item.id"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="车牌号"
                                prop="licensePlate"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <WsLicenseNo
                                    :licenseNo="ruleForm.licensePlate"
                                    @licenseNoChange="licenseNoChange"
                                ></WsLicenseNo>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="车辆类型"
                                prop="vehicleType"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleForm.vehicleType"
                                    placeholder="请选择"
                                    @change="depIdChange"
                                >
                                    <el-option
                                        v-for="item in vehicleTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

                <div class="sludgeInfo sludgemodel">
                    <div class="modelTitle">补充信息</div>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="动力类型"
                                prop="impetusType"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleForm.impetusType"
                                    placeholder="请选择"
                                    @change="depIdChange"
                                >
                                    <el-option
                                        v-for="item in impetusTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="总重量(吨)"
                                prop="emptyWeight"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.emptyWeight"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="核定载重(吨)"
                                prop="approvedLoad"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.approvedLoad"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="车长(米)"
                                prop="length"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.length"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="车宽(米)"
                                prop="width"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.width"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="车高(米)"
                                prop="height"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleForm.height"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="轴数"
                                prop="axleNumber"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleForm.axleNumber"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in axleNumberList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>

            <div
                class="sludgeInfo sludgemodel"
                v-if="dialogType == 'detail'"
            >
                <div class="modelTitle">运输记录</div>
                <div
                    class="flex gap-2"
                    style="margin-bottom: 10px"
                >
                    <el-tag
                        style="margin-right: 10px"
                        type="primary"
                    >累计转运吨数(--)</el-tag>
                    <el-tag
                        style="margin-right: 10px"
                        type="success"
                    >累计转运次数(--)</el-tag>
                    <el-tag
                        style="margin-right: 10px"
                        type="info"
                    >累计行驶公里(--)</el-tag>
                    <el-tag
                        style="margin-right: 10px"
                        type="warning"
                    >累计行驶小时(--)</el-tag>
                </div>
                <el-table
                    :data="recordTableData"
                    style="width: 100%"
                    highlight-current-row
                    :cell-style="{ 'text-align': 'center' }"
                    :header-cell-style="headerCellStyle"
                    :row-class-name="tableRowClassName"
                    size="default"
                >
                    <el-table-column
                        prop="depId"
                        label="所属单位"
                        min-width="120"
                        column-key="depId"
                        :filters="[
                            { text: '公司', value: '1' },
                            { text: '星沙厂', value: '2' },
                            { text: '城西厂', value: '3' },
                            { text: '城北厂', value: '4' },
                            { text: '城南厂', value: '5' },
                            { text: '城东厂', value: '6' },
                        ]"
                        :filter-method="filterHandler"
                    >
                        <template #default="scope">
                            {{ depNameTranslate(scope.row.depId) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sludgeBatchNo"
                        label="污泥批次号"
                        min-width="120"
                    />
                    <el-table-column
                        prop="loadingTime"
                        sortable
                        label="装车时间"
                        min-width="120"
                    />
                    <el-table-column
                        prop="loadingLocation"
                        label="装车地点"
                    />
                    <el-table-column
                        prop="transferQuantity"
                        label="转运量（吨）"
                        min-width="120"
                    />
                    <el-table-column
                        prop="licensePlate"
                        label="车牌号"
                    />
                    <el-table-column
                        prop="transferDestination"
                        label="转运目的地"
                        min-width="120"
                    />
                    <el-table-column
                        prop="inspectionReportNo"
                        label="检测报告编号"
                        min-width="120"
                    />
                    <el-table-column
                        prop="transportCount"
                        label="累计运输次数"
                        min-width="120"
                    />
                    <el-table-column
                        prop="lastTransportTime"
                        label="最新运输时间"
                        min-width="120"
                    />
                    <el-table-column
                        prop="lastDriver"
                        label="最新驾驶员"
                        min-width="120"
                    />
                    <el-table-column
                        prop="status"
                        label="状态"
                        min-width="120"
                        column-key="status"
                        :filters="[
                            { text: '装车中', value: '0' },
                            { text: '运输中', value: '10' },
                            { text: '异常', value: '99' },
                            { text: '已接收', value: '100' },
                        ]"
                        :filter-method="filterHandler"
                    >
                        <template #default="scope">
                            {{ statusNameTranslate(scope.row.status) }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-model:current-page="recordSearchForm.pageNum"
                    v-model:page-size="recordSearchForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :total="recordTotal"
                    @size-change="handleSizeChangeRecord"
                    @current-change="handleCurrentChangeRecord"
                    class="equipmentPagination"
                />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="confirm"
                    v-show="dialogType != 'detail'"
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog
        v-model="dialogVisiblePilot"
        :title="dialogTitlePilot"
        width="1000px"
    >
        <div class="dialogContent">
            <el-form
                ref="ruleFormPilotRef"
                :model="ruleFormPilot"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
                :inline="true"
                :disabled="dialogTypePilot == 'detail'"
            >
                <div class="baseInfo sludgemodel">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="运输单位"
                                prop="transportDepName"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-select
                                    v-model="ruleFormPilot.transportDep"
                                    placeholder="请选择"
                                    @change="transportDepChangeRuleFormPilot"
                                >
                                    <el-option
                                        v-for="item in transportDepNameList"
                                        :key="item.id"
                                        :label="item.transportDepName"
                                        :value="item.id"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="姓名"
                                prop="username"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormPilot.username"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="联系方式"
                                prop="phone"
                                class="demo-ruleForm-item"
                                style="width: 100%;"
                            >
                                <el-input
                                    v-model="ruleFormPilot.phone"
                                    placeholder="请输入"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>

            <div
                class="sludgeInfo sludgemodel"
                v-if="dialogTypePilot == 'detail'"
            >
                <div class="modelTitle">运输记录</div>
                <div
                    class="flex gap-2"
                    style="margin-bottom: 10px"
                >
                    <el-tag
                        style="margin-right: 10px"
                        type="primary"
                    >累计转运吨数(--)</el-tag>
                    <el-tag
                        style="margin-right: 10px"
                        type="success"
                    >累计转运次数(--)</el-tag>
                    <el-tag
                        style="margin-right: 10px"
                        type="info"
                    >累计行驶公里(--)</el-tag>
                    <el-tag
                        style="margin-right: 10px"
                        type="warning"
                    >累计行驶小时(--)</el-tag>
                </div>
                <el-table
                    :data="recordTableDataPilot"
                    style="width: 100%"
                    highlight-current-row
                    :cell-style="{ 'text-align': 'center' }"
                    :header-cell-style="headerCellStyle"
                    :row-class-name="tableRowClassName"
                    size="default"
                >
                    <el-table-column
                        prop="depId"
                        label="所属单位"
                        min-width="120"
                        column-key="depId"
                        :filters="[
                            { text: '公司', value: '1' },
                            { text: '星沙厂', value: '2' },
                            { text: '城西厂', value: '3' },
                            { text: '城北厂', value: '4' },
                            { text: '城南厂', value: '5' },
                            { text: '城东厂', value: '6' },
                        ]"
                        :filter-method="filterHandler"
                    >
                        <template #default="scope">
                            {{ depNameTranslate(scope.row.depId) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sludgeBatchNo"
                        label="污泥批次号"
                        min-width="120"
                    />
                    <el-table-column
                        prop="loadingTime"
                        sortable
                        label="装车时间"
                        min-width="120"
                    />
                    <el-table-column
                        prop="loadingLocation"
                        label="装车地点"
                    />
                    <el-table-column
                        prop="transferQuantity"
                        label="转运量（吨）"
                        min-width="120"
                    />
                    <el-table-column
                        prop="licensePlate"
                        label="车牌号"
                    />
                    <el-table-column
                        prop="transferDestination"
                        label="转运目的地"
                        min-width="120"
                    />
                    <el-table-column
                        prop="inspectionReportNo"
                        label="检测报告编号"
                        min-width="120"
                    />
                    <el-table-column
                        prop="transportCount"
                        label="累计运输次数"
                        min-width="120"
                    />
                    <el-table-column
                        prop="lastTransportTime"
                        label="最新运输时间"
                        min-width="120"
                    />
                    <el-table-column
                        prop="lastDriver"
                        label="最新驾驶员"
                        min-width="120"
                    />
                    <el-table-column
                        prop="status"
                        label="状态"
                        min-width="120"
                        column-key="status"
                        :filters="[
                            { text: '装车中', value: '0' },
                            { text: '运输中', value: '10' },
                            { text: '异常', value: '99' },
                            { text: '已接收', value: '100' },
                        ]"
                        :filter-method="filterHandler"
                    >
                        <template #default="scope">
                            {{ statusNameTranslate(scope.row.status) }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-model:current-page="recordSearchFormPilot.pageNum"
                    v-model:page-size="recordSearchFormPilot.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :total="recordTotalPilot"
                    @size-change="handleSizeChangeRecordPilot"
                    @current-change="handleCurrentChangeRecordPilot"
                    class="equipmentPagination"
                />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisiblePilot = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="confirmPilot"
                    v-show="dialogTypePilot != 'detail'"
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import WsLicenseNo from "@/components/wsLicenseNo/index.vue";
import driverHttp from "@/https/driver.js";
import transportDepHttp from "@/https/transportDep.js";
import vehicleHttp from "@/https/vehicle.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import {
    Delete,
    Edit,
    Plus,
    View
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
const isSupervisor = ref(false)
const roleNames = ref(Storage.localGet("roleNames"))
if (roleNames.value.includes('supervisor')) {
    isSupervisor.value = true
}
const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event)
}
const searchForm = reactive({
    transportDepName: '',
    licensePlate: '',
    pageNo: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = ref([])
const headerCellStyle = () => {
    let style = {
        background: '#f2f3f5',
        // color: '#fff',
        textAlign: 'center'
    }
    return style
}
const tableRowClassName = ({ row, rowIndex }) => {
    if ((rowIndex + 1) % 2 === 0) {
        // return 'warning-row'
    }
    return ''
}

const filterHandler = (
    value,
    row,
    column
) => {
    const property = column['property']
    return row[property] === value
}
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
}
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
}
const reset = async () => {
    searchForm.transportDepName = ''
    searchForm.licensePlate = ''
    searchForm.pageNo = 1
    searchForm.pageSize = 10
    search()
}
const search = async () => {
    const res = await vehicleHttp.pageList(searchForm)
    console.log(res.data)
    if (res.data.code == 200) {
        tableData.value = res.data.data.records
        total.value = res.data.data.total
    }
}

const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const vehicleTypeList = ref([
    { label: "微型货车", value: "微型货车" },
    { label: "轻型货车", value: "轻型货车" },
    { label: "中型货车", value: "中型货车" },
    { label: "重型货车", value: "重型货车" },
]);
const impetusTypeList = ref([
    { label: "汽油", value: "汽油" },
    { label: "柴油", value: "柴油" },
    { label: "油电混动", value: "油电混动" },
    { label: "纯电动", value: "纯电动" },
    { label: "插混/增程", value: "插混/增程" },
]);
const axleNumberList = ref([
    { label: "2轴", value: "2轴" },
    { label: "3轴", value: "3轴" },
    { label: "4轴", value: "4轴" },
    { label: "5轴", value: "5轴" },
    { label: "6轴", value: "6轴" },
    { label: "6轴及以上", value: "6轴及以上" },
]);
let ruleForm = ref({
    transportDepName: '',
    transportDep: '',
    licensePlate: '',
    vehicleType: '',
    impetusType: '',
    emptyWeight: '',
    approvedLoad: '',
    length: '',
    width: '',
    height: '',
    axleNumber: ''
})
const dialogVisible = ref(false)
const dialogType = ref('')
const dialogTitle = ref('')
const handleAdd = () => {
    dialogVisible.value = true
    dialogType.value = 'add'
    dialogTitle.value = '新增'
}
const handleDetail = (index, row) => {
    dialogVisible.value = true
    dialogType.value = 'detail'
    dialogTitle.value = '详情'
    ruleForm.value = { ...row }
    recordSearch(row.licensePlate)
}
const handleEdit = (index, row) => {
    dialogVisible.value = true
    dialogType.value = 'edit'
    dialogTitle.value = '编辑'
    ruleForm.value = { ...row }
}

const licenseNoChange = async (params) => {
    ruleForm.value.licensePlate = params
}
const confirm = async () => {
    if (dialogType.value == 'add') {
        const { data } = await vehicleHttp.addVehicle(ruleForm.value)
        dialogVisible.value = false
        if (data.code == 200) {
            ElMessage({
                message: "新增成功",
                type: "success",
            });
            search()
        }
    } else if (dialogType.value == 'edit') {
        const { data } = await vehicleHttp.updateVehicle(ruleForm.value)
        dialogVisible.value = false
        if (data.code == 200) {
            ElMessage({
                message: "修改成功",
                type: "success",
            });
            search()
        }
    }
}

const handleDelete = async (index, row) => {
    ElMessageBox.confirm("确认删除该数据吗？", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const { data } = await vehicleHttp.deleteVehicle(row)
            if (data.code == 200) {
                ElMessage({
                    message: "删除成功",
                    type: "success",
                });
                search()
            }
        })
}
// 驾驶员
const searchFormPilot = reactive({
    username: '',
    pageNo: 1,
    pageSize: 10
})
const totalPilot = ref(0)
const tableDataPilot = ref([])
const handleSizeChangePilot = (val) => {
    searchFormPilot.pageSize = val;
    searchPilot();
}
const handleCurrentChangePilot = (val) => {
    searchFormPilot.pageNo = val;
    searchPilot();
}
const resetPilot = async () => {
    searchFormPilot.username = ''
    searchFormPilot.pageNo = 1
    searchFormPilot.pageSize = 10
    searchPilot()
}
const searchPilot = async () => {
    const res = await driverHttp.pageList(searchFormPilot)
    console.log(res.data)
    if (res.data.code == 200) {
        tableDataPilot.value = res.data.data.records
        totalPilot.value = res.data.data.total
    }
}
const handleDeletePilot = async (index, row) => {
    ElMessageBox.confirm("确认删除该数据吗？", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const { data } = await driverHttp.deleteDriver(row)
            if (data.code == 200) {
                ElMessage({
                    message: "删除成功",
                    type: "success",
                });
                searchPilot()
            }
        })
}

let ruleFormPilot = ref({
    transportDepName: '',
    transportDep: '',
    username: '',
    phone: '',
})
let defaultRuleFormPilot = ref({
    transportDepName: '',
    transportDep: '',
    username: '',
    phone: '',
})

const dialogVisiblePilot = ref(false)
const dialogTypePilot = ref('')
const dialogTitlePilot = ref('')
const handleAddPilot = () => {
    dialogVisiblePilot.value = true
    dialogTypePilot.value = 'add'
    dialogTitlePilot.value = '新增'
    ruleFormPilot.value = { ...defaultRuleFormPilot.value }
}
const handleDetailPilot = (index, row) => {
    dialogVisiblePilot.value = true
    dialogTypePilot.value = 'detail'
    dialogTitlePilot.value = '详情'
    ruleFormPilot.value = { ...row }
    recordSearchPilot(row)
}
const handleEditPilot = (index, row) => {
    dialogVisiblePilot.value = true
    dialogTypePilot.value = 'edit'
    dialogTitlePilot.value = '编辑'
    ruleFormPilot.value = { ...row }
}
const confirmPilot = async () => {
    if (dialogTypePilot.value == 'add') {
        const { data } = await driverHttp.addDriver(ruleFormPilot.value)
        dialogVisiblePilot.value = false
        if (data.code == 200) {
            ElMessage({
                message: "新增成功",
                type: "success",
            });
            searchPilot()
        }
    } else if (dialogTypePilot.value == 'edit') {
        const { data } = await driverHttp.updateDriver(ruleFormPilot.value)
        dialogVisiblePilot.value = false
        if (data.code == 200) {
            ElMessage({
                message: "修改成功",
                type: "success",
            });
            searchPilot()
        }
    }
}
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },])

const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const handleSuccess = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
//运输单位list
const transportDepNameList = ref([])
const searchUnit = async () => {
    const res = await transportDepHttp.pageList({})
    console.log(res.data)
    if (res.data.code == 200) {
        transportDepNameList.value = res.data.data.records
    }
}
const transportDepChangeRuleForm = (v, type) => {
    transportDepNameList.value.forEach((item) => {
        if (item.id == v) {
            ruleForm.value.transportDepName = item.transportDepName;
            ruleForm.value.depId = item.depId;
        }
    });
}
const transportDepChangeRuleFormPilot = (v, type) => {
    transportDepNameList.value.forEach((item) => {
        if (item.id == v) {
            ruleFormPilot.value.transportDepName = item.transportDepName;
            ruleFormPilot.value.depId = item.depId;
        }
    });
}
const transportDepNameTranslate = (depId) => {
    let transportDepName = "";
    transportDepNameList.value.forEach((item) => {
        if (item.value == depId) {
            transportDepName = item.label;
        }
    });
    return transportDepName;
};
const statusList = ref([
    { label: "装车中", value: "0" },
    { label: "运输中", value: "10" },
    { label: "异常", value: "99" },
    { label: "已接收", value: "100" },
]);

const recordSearchForm = ref({
    licensePlate: '',
    pageNum: 1,
    pageSize: 10
})

const recordTableData = ref([])
const recordTotal = ref(0)

const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const statusNameTranslate = (status) => {
    let statusName = "";
    statusList.value.forEach((item) => {
        if (item.value == status) {
            statusName = item.label;
        }
    });
    return statusName;
};
const recordSearch = async (licensePlate) => {
    let params = {
        ...recordSearchForm.value,
        licensePlate: licensePlate
    }
    const res = await vehicleHttp.transportRecord(params)
    console.log(res.data)
    if (res.data.code == 200) {
        recordTableData.value = res.data.data.records
        recordTotal.value = res.data.data.total
    }
}
const handleSizeChangeRecord = (val) => {
    recordSearchForm.pageSize = val;
    recordSearch();
}
const handleCurrentChangeRecord = (val) => {
    recordSearchForm.pageNo = val;
    recordSearch();
}

const recordSearchFormPilot = ref({
    username: '',
    phone: '',
    pageNum: 1,
    pageSize: 10
})

const recordTableDataPilot = ref([])
const recordTotalPilot = ref(0)

const recordSearchPilot = async (row) => {
    let params = {
        ...recordSearchFormPilot.value,
        username: row.username,
        phone: row.phone
    }
    const res = await driverHttp.transportRecord(params)
    console.log(res.data)
    if (res.data.code == 200) {
        recordTableDataPilot.value = res.data.data.records
        recordTotalPilot.value = res.data.data.total
    }
}
const handleSizeChangeRecordPilot = (val) => {
    recordSearchFormPilot.pageSize = val;
    recordSearchPilot();
}
const handleCurrentChangeRecordPilot = (val) => {
    recordSearchFormPilot.pageNo = val;
    recordSearchPilot();
}

onMounted(() => {
    search()
    searchPilot()
    searchUnit()
})
</script>

<style scoped lang="less">
.contant {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding-bottom: 16px;
    :deep(.el-tabs__nav) {
        padding: 0 20px !important;
    }
    :deep(.el-tabs__item) {
        font-weight: 400 !important;
        font-size: 14px;
    }
    :deep(.el-tabs__nav-wrap:after) {
        height: 1px;
    }
    :deep(.el-tab-pane) {
        padding: 0;
    }
    .operatingArea {
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .addBtn {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
}
.dialogContent {
    .sludgemodel {
        // margin-bottom: 10px;
        .modelTitle {
            font-size: 16px;
            line-height: 18px;
            padding-left: 10px;
            border-left: 3px solid #38acf5;
            margin-bottom: 10px;
            font-weight: 500;
            .addCar {
                margin-left: 10px;
            }
        }
    }
    .carInfo {
        .carItem {
            padding: 0 14px;
            .carItemName {
                font-size: 12px;
                color: #666;
                line-height: 24px;
                border-bottom: 1px solid #eee;
                margin-bottom: 10px;
                position: relative;
                .deleteCar {
                    position: absolute;
                    right: 0;
                    top: 2px;
                    width: 14px;
                    height: 18px;
                    font-size: 10px;
                }
            }
        }
    }
    .hiddenAddPic {
        :deep(.el-upload--picture-card) {
            display: none;
        }
    }
}
.equipmentPagination {
    justify-content: center;
    margin-top: 10px;
}
</style>
